<template>
	<div id="userLayout" class="user-layout-wrapper">
		<div class="container">
			<div class="loginbox">
				<div class="top">
					<img src="@/assets/logo.jpeg" class="logo" alt="logo" />
					<div class="title">{{ titleName }}</div>
					<div class="header">
						<div>
							<div class="hover">
								<div class="dot dot-1" />
								<div class="dot dot-2" />
								<div class="dot dot-3" />
							</div>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								xmlns:xlink="http://www.w3.org/1999/xlink"
								version="1.1"
								width="10vw"
								height="38vh"
							>
								<defs>
									<filter id="goo">
										<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="blur" />
										<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0 " />
									</filter>
								</defs>
							</svg>
						</div>
					</div>
				</div>
				<slot />
			</div>

			<div class="footer">
				<div class="links">
					<a href="" target="_blank">帮助</a>
					<a href="" target="_blank">隐私</a>
					<a href="" target="_blank">条款</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onBeforeMount, onBeforeUnmount, Ref, ref } from "vue";
const { proxy } = getCurrentInstance() as any;
const now: Ref<string | number> = ref("1");
const titleName = ref<string>("测试版本");
// onBeforeMount(() => {
//   proxy.timeInter = setInterval(() => {
//     proxy.now++
//     if (proxy.now == 10) return (proxy.now = 1)
//   })
// })
// onBeforeUnmount(() => {
//   clearInterval(proxy.timeInter);
//   proxy.timeInter = null;
// });
</script>

<style lang="less">
#userLayout.user-layout-wrapper {
	height: 100%;
	color: var( --color);

	.container {
		width: 100%;
		min-height: 100%;
		height: 100vh;
		// background: #c6e8ee url(@/assets/bg.jpg) no-repeat center top;
		background:var(--background);
		// background: #c6e8ee url(@/assets/loginbg/background.svg) no-repeat center top;
		vertical-align: middle;
		display: flex;
		background-size: cover;

		a {
			text-decoration: none;
		}
		.loginbox {
			width: 40vw;
			height: 50vh;
			margin: auto;
			background: var(--primary);
			box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
			border-radius: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			.top {
				text-align: center;
				width: 20vw;
				height: 50vh;
				background: #b38585 url(@/assets/loginbg/bg.jpg) no-repeat center top;
				box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
				background-size: cover;
				border-bottom-left-radius: 8px;
				border-top-left-radius: 8px;
				padding: 2vh;
				.logo {
					height: 8vh;
					width: 8vh;
					border-radius: 15%;
					border-style: none;
					display: block;
					margin-left: auto;
					margin-right: auto;
				}
				.title {
					width: 100%;
					height: 4vh;
					display: block;
					margin-left: auto;
					margin-right: auto;
					font-size: 1.5em;
					color: #ffffff;
					font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
					font-weight: 600;
				}
				.header {
					width: 18vw;
					height: 34vh;
					position: relative;

					.hover {
						width: 18vw;
						height: 18vw;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						margin: auto;
						filter: url("#goo");
						animation: rotate-move 2s ease-in-out infinite;
						@keyframes rotate-move {
							55% {
								transform: translate(-50%, -50%) rotate(0deg);
							}
							80% {
								transform: translate(-50%, -50%) rotate(360deg);
							}
							100% {
								transform: translate(-50%, -50%) rotate(360deg);
							}
						}
						@keyframes index {
							0%,
							100% {
								z-index: 3;
							}
							33.3% {
								z-index: 2;
							}
							66.6% {
								z-index: 1;
							}
						}
						.dot {
							width: 100px;
							height: 100px;
							border-radius: 50%;
							background-color: #000;
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
							margin: auto;
						}
						.dot-3 {
							background-color: rgb(255, 121, 121);
							animation: dot-3-move 2s ease infinite, index 6s ease infinite;
						}
						.dot-2 {
							background-color: rgb(235, 213, 93);
							animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
						}
						.dot-1 {
							background-color: rgb(113, 201, 25);
							animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
						}
						@keyframes dot-3-move {
							20% {
								transform: scale(1);
							}
							45% {
								transform: translateY(-18px) scale(0.45);
							}
							60% {
								transform: translateY(-90px) scale(0.45);
							}
							80% {
								transform: translateY(-90px) scale(0.45);
							}
							100% {
								transform: translateY(0px) scale(1);
							}
						}
						@keyframes dot-2-move {
							20% {
								transform: scale(1);
							}
							45% {
								transform: translate(-16px, 12px) scale(0.45);
							}
							60% {
								transform: translate(-80px, 60px) scale(0.45);
							}
							80% {
								transform: translate(-80px, 60px) scale(0.45);
							}
							100% {
								transform: translateY(0px) scale(1);
							}
						}
						@keyframes dot-1-move {
							20% {
								transform: scale(1);
							}
							45% {
								transform: translate(16px, 12px) scale(0.45);
							}
							60% {
								transform: translate(80px, 60px) scale(0.45);
							}
							80% {
								transform: translate(80px, 60px) scale(0.45);
							}
							100% {
								transform: translateY(0px) scale(1);
							}
						}
					}
				}
			}
			.main {
				width: 50%;
				height: 100%;
				position: relative;
				text-align: center;
				border-bottom-right-radius: 8px;
				border-top-right-radius: 8px;
				background: #fcfcfc url(@/assets/loginbg/809.jpeg) no-repeat center top;
				background-size: cover;
				box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);

				.mains {
					widows: 100%;
					height: 100%;
					padding: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;

					.user-layout-login label {
						font-size: 1em !important;
					}
					.login-button {
						font-size: 1.2em;
						height: 40px;
						width: 100%;
						border-radius: 4px;
					}
					.user-layout-login {
						label {
							font-size: 1.2em;
						}
						.getCaptcha {
							display: block;
							width: 100%;
							height: 40px;
						}

						button.login-button {
							padding: 0 15px;
							font-size: 1.2em;
							border-radius: 4px;
						}
					}
				}
			}
		}

		.footer {
			position: absolute;
			width: 100%;
			bottom: 0;
			padding: 0 16px;
			margin: 48px 0 24px;
			text-align: center;

			.links {
				margin-bottom: 8px;
				font-size: 14px;
				a {
					color: rgba(0, 0, 0, 0.45);
					transition: all 0.3s;
					&:not(:last-child) {
						margin-right: 40px;
					}
				}
			}
		}
	}
}
</style>
